2019獨角獸企業重金招聘Python工程師標準>>>

1、首先要安裝?Node.js，?Node.js?自帶了軟件包管理器?npm，Webpack?需要Node.js v0.6?以上支持，建議使用最新版?Node.js。

2、安裝Webpack?到全局環境下 ：

npm install webpack -g //（可以通過命令行?webpack -h?或webpack -v 驗證）

3、將 Webpack 安裝到實際項目的依賴中，這樣就可以使用項目本地版本的 Webpack。

npm install webpack --save-dev //查看 webpack 版本信息 : npm info webpack//安裝指定版本的 webpack: npm install webpack@1.12.x --save-dev

4、確定是否有 package.json，沒有就通過 npm init 創建

5、安裝Loader轉換器（只需要在本地安裝，不需?-g）(Webpack?本身只能處理原生的?JavaScript?模塊，但是?loader?轉換器可以將各種類型的資源轉換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。）

//常用的轉換插件 npm install css-loader style-loader//轉換CSS npm install postcss-loader --save-dev npm install url-loader //轉換圖片 npm install expose-loader --save-dev //暴露 npm install babel-loader babel-core 或 npm install jsx-loader // jsx轉換 npm install less less-loader --save-dev // npm install babel-preset-es2015 //ECMAScript6語法依賴

6、配置

var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = {//頁面入口文件配置entry: {index : './src/js/page/index.js'},//入口文件輸出配置output: {path: 'dist/js/page',filename: '[name].js'},module: {//加載器配置loaders: [//.css 文件使用 style-loader 和 css-loader 來處理{ test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader' },//.less 轉換loader{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" },//.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},//.js 文件使用 jsx-loader 來編譯處理{ test: /\.jsx$/, loader: 'jsx-loader?harmony' },//圖片文件使用 url-loader 來處理，小于8kb的直接轉為base64{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},//ECMAScript6語法依賴{ test: /\.jsx?$/,exclude: /node_modules/, loader: 'babel',query: {presets: ['es2015', 'react']}}]},//插件項plugins: [commonsPlugin],//其它解決方案配置(webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時候，允許使用動態表達式 require("./js/my.js"),但是這樣過于復雜，我們可以通過這個配置項使得后面開發工作更加方便。)resolve: {//root: 'E:/github/flux-example/src', //絕對路徑//自動擴展文件后綴名，意味著我們require模塊可以省略不寫后綴名extensions: ['', '.js', '.json', '.scss'],//模塊別名定義，方便后續直接引用別名，無須多寫長長的地址alias: {my: './js/my.js', //后續直接 var 標識符 = require('my') 即可 //標識符首字母不強要求大小寫，eg：my 或 Myapi: './api.js'}} };

⑴ plugins 是插件項，這里我們使用了一個 CommonsChunkPlugin?的插件，它用于提取多個入口文件的公共腳本部分，然后生成一個 common.js 來方便多頁面之間進行復用。

⑵ entry 是頁面入口文件配置，output 是對應輸出項配置（即入口文件最終要生成什么名字的文件、存放到哪里）。

轉載于:https://my.oschina.net/u/2395167/blog/789731

總結

以上是生活随笔為你收集整理的webpack 环境安装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。