webpack打包jsx,webpack打包js路徑不對

本文目錄一覽：

• 1、webpack 能將html打包成js文件嗎
• 2、webpack核心四要素總結
• 3、如何用webpack打包一個網站應用
• 4、webpack中是什麼意思？有什麼用？如何用
• 5、如何用 webpack 打包 node
• 6、webpack npm start和npm run server

webpack 能將html打包成js文件嗎

load是個解析器，webpack只能加載js文件，但是開發vue是,vue文件；圖片是png，jsx、json、EXE、等等這些都不是js文件；所以需要load解析器；把他們解析成js格式的文件，這樣webpack就能加載處理了

webpack核心四要素總結

入口：webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。參數定義了打包後的入口文件，可以是個字符串或數組或者是對象；如果是數組，數組中的所有文件會打包生成一個filename文件；如果是對象，可以將不同的文件構建成不同的文件。

可以通過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點）。默認值為 ./src。

entry: {

   app: ‘./src/main.js’

  }

出口：webpack 在哪裡輸出它所創建的 bundles，以及如何命名這些文件，默認值為 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段，來配置這些處理過程。

path: 打包文件存放的絕對路徑

publicPath: 網站運行時的訪問路徑

filename:打包後的文件名

當我們在entry中定義構建多個文件時，filename可以對應的更改為[name].js用於定義不同文件構建後的名字。

output: {

    path: config.build.assetsRoot,

    filename: ‘[name].js’,

    publicPath: process.env.NODE_ENV ===’production’

      ? config.build.assetsPublicPath

      : config.dev.assetsPublicPath

  }

Loader：webpack 能夠去處理那些非JavaScript 文件（webpack 自身只理解JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然後你就可以利用 webpack 的打包能力，對它們進行處理。

在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，圖片等靜態文件都是模塊，不同模塊的加載是通過模塊加載器（webpack-loader）來統一管理的。loaders之間是可以串聯的，一個加載器的輸出可以作為下一個加載器的輸入，最終返回到JavaScript上。

loader：loader的名稱（必須）

include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；

query：為loaders提供額外的設置選項（可選）

{

        test: /\.vue$/,

        loader: ‘vue-loader’,

        options: vueLoaderConfig

      },

      {

        test: /\.js$/,

        loader: ‘babel-loader’,

        include: [resolve(‘src’),resolve(‘test’), resolve(‘node_modules/webpack-dev-server/client’)]

      }

插件：插件目的在於解決 loader 無法實現的其他事。插件是一個具有 apply 屬性的 JavaScript 對象。apply 屬性會被 webpack compiler 調用，並且 compiler 對象可在整個編譯生命周期訪問。

plugins: [

    new webpack.DefinePlugin({

      ‘process.env’:require(‘../config/dev.env’)

    }),

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(), // HMRshows correct file names in console on update.

    new webpack.NoEmitOnErrorsPlugin(),

    //

    new HtmlWebpackPlugin({

      filename: ‘index.html’,

      template: ‘index.html’,

      inject: true

    }),

    // copy custom static assets

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname,’../static’),

        to: config.dev.assetsSubDirectory,

        ignore: [‘.*’]

      }

    ])

  ]

如何用webpack打包一個網站應用

隨着前端技術的發展，越來越多新名詞出現在我們眼前。angularjs、react、gulp、webpack、es6、babel……新技術出現，讓我們了解了解用起來吧！今天我來介紹一下如何用webpack打包一個網頁應用。

一般我們寫頁面，大概都是這樣的結構：

index.html

css

style.css

js

index.js

………..

這樣我們的html里直接引用css和js，完成一個網頁應用。用webpack也類似，只是webpack把圖片、css和js都編譯打包成一個文件，我們只需要引用一個文件就可以了。

1.我們需要先安裝node環境。沒安裝的請自行安裝

2.在項目目錄下輸入npm init初始化一個node項目，輸入項目名稱等信息，完成後生成一個package.json文件。

3.在項目目錄下安裝webpack

npm install –save-dev webpack

4.我們需要一個webpack.config.js文件，記錄webpack配置信息。它的配置大概這樣：

var webpack = require(‘webpack’);

var path = require(‘path’);

var buildPath = path.resolve(__dirname, ‘build’);

var config = {

//入口文件

entry: {

index : ‘./src/js/index.js’

},

extensions: [”, ‘.js’, ‘.json’, ‘.css’, ‘.less’],

output: {

path: buildPath, //編譯後的文件路徑

filename: ‘app.js’

},

module: {

//Loaders

loaders: [

//.css 文件使用 style-loader 和 css-loader 來處理

{ test: /\.css$/, loader: ‘style-loader!css-loader’ },

{ test: /\.less$/,

loader: ‘style-loader!css-loader!less-loader’

},

//.js 文件使用 babel 來編譯處理

{ test: /\.js$/, loader: ‘babel’ },

//圖片文件使用 url-loader 來處理，小於8kb的直接轉為base64

{ test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’}

]

},

};

module.exports = config;

我們需要指定編譯的入口文件和輸出的目錄路徑，以及css和js用什麼loader處理，比如我使用了less，要編譯less文件，就指定less-loader，js我要用es6來寫，為了兼容性，用babel來轉成es5的代碼。如果要使用react，也可以指定jsx等的編譯方式。

5.這些loader都是需要npm安裝的

npm install –save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015

6.如果需要用babel，在項目目錄下新建一個名為.babelrc的隱藏文件，裡面這樣寫：

{“presets”:[“es2015”]}

保存。

7.根據配置可以看到我們需要一個src文件夾和一個build文件夾，src放圖片、css和js的源代碼，build作為輸出文件夾放編譯後的文件。

8.src/js/index.js文件作為我們的入口文件，我們在裡面可以愉快地寫es6的代碼，比如：

‘use strict’;

require(‘../css/base.css’);

require(‘../css/animate.css’);

require(‘../css/style.less’);

require(‘../js/zepto.min.js’);

let a = ‘world’;

let hello = `hello ${a}`;

console.log(hello);

可以看到css我們都通過require的方式引進來，這樣webpack會把css和js打包進一個文件。

9.我們還差個index.html，放在項目文件夾下就可以，正常寫，引入build/app.js就可以啦！

10.讓我們試試吧

webpack中是什麼意思？有什麼用？如何用

webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。

我們可以直接使用 require(XXX) 的形式來引入各模塊，即使它們可能需要經過編譯（比如JSX和sass），但我們無須在上面花費太多心思，因為 webpack 有着各種健全的加載器（loader）在默默處理這些事情，這塊我們後續會提到。

如何用 webpack 打包 node

按照通常的做法, package.json中的dependencies都是會被項目require的依賴, devDependencies都是和環境相關的依賴, 如果自己也是這樣的話(或者也可以改成這樣), 那麼只需要:

var json = require(‘./package.json’) // 這個路徑視當前的路徑進行對於修改

module.exports = {

entry: {

app: path.resolve(__dirname, ‘app/index.jsx’),

// 將 第三方依賴 單獨打包

vendor: Object.keys(json.dependencies)

},

output: {

path: __dirname + “/build”,

filename: “[name].[chunkhash:8].js”,

publicPath: ‘/’

},

// …省略若干行…

plugins: [

// …省略若干行…

new webpack.optimize.CommonsChunkPlugin({

name: ‘vendor’,

filename: ‘[name].[chunkhash:8].js’

})

]

}

webpack npm start和npm run server

最近開始學習webpack，webpack可以看做是模塊打包機，分析項目結構，找到JavaScript模塊和一些瀏覽器不能直接運行的語言，類似Scss,JSX,Typescript等，並將其轉換和打包為合適的格式供瀏覽器使用。

沒有比較性

Gulp/Grunt是一種能夠優化前端的開發流程的自動化工具，webpack是模塊化的解決方案，本質上就不是一樣，而且在很多時候，webpack可以替代前面兩者的工作

webpack是webpack自帶的一條打包命令，是最基本的打包命令。

npm run webpack，則是在package.json文件中有一個script配置項，在這個script裡面自定義的一條命令，它通過npm來運行。例如：

當腳本名為“start”時，可以省略“run”，直接為：

npm run server等也類似