2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

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

2、安裝Webpack?到全局環(huán)境下 ：

npm install webpack -g //（可以通過(guò)命令行?webpack -h?或webpack -v 驗(yàn)證）

3、將 Webpack 安裝到實(shí)際項(xiàng)目的依賴中，這樣就可以使用項(xiàng)目本地版本的 Webpack。

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

4、確定是否有 package.json，沒(méi)有就通過(guò) npm init 創(chuàng)建

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

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

6、配置

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

⑴ plugins 是插件項(xiàng)，這里我們使用了一個(gè) CommonsChunkPlugin?的插件，它用于提取多個(gè)入口文件的公共腳本部分，然后生成一個(gè) common.js 來(lái)方便多頁(yè)面之間進(jìn)行復(fù)用。

⑵ entry 是頁(yè)面入口文件配置，output 是對(duì)應(yīng)輸出項(xiàng)配置（即入口文件最終要生成什么名字的文件、存放到哪里）。

轉(zhuǎn)載于:https://my.oschina.net/u/2395167/blog/789731

總結(jié)

以上是生活随笔為你收集整理的webpack 环境安装的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。