：D
進入D盤javascript
mkdir webappcss
cd webapphtml
mkdir webapp && cd webappvue
npm init -yjava
npm install xxx --save-devnode
npm install xxx --savejquery
npm install xxx@2.3.0webpack
npm view webpack versions --jsongit
npm install -g cnpm --registry=https://registry.npm.taobao.orges6
cls
1. 在根目錄下生成package.json文件： npm init -y 2. 安裝webapck cnpm install webpack --save-dev 3. 建立webpack.config.js文件： echo > webpack.config.js
var path=require("path"); module.exports={ <!-- 要打包的文件 --> entry:"./index.js", output:{ <!-- 指定打包後的文件名字 --> filename:"bundle.js", <!-- 打包後的文件路徑 --> path:path.resolve(__dirname,"dist") } }
4.建立src目錄，並在src目錄下建立index.html, index.js文件並隨便輸一點東西
window.onload=function(){ alert(1) }
5.執行 webpack 命令，能夠發現webpack幫咱們在dist下生成了一個main.js文件,打開main.js並拖到最下面你會發現index.js的內容就在裏面。 打包完以後，咱們在dist生成了js文件，可是咱們的index.html在src下面，你能夠手動的複製src下的html文件到dist目錄下，而且將打包後的js文件引入。不過像咱們這麼懶的人，仍是但願webpack可以幫咱們在dist下也生成index.html，要是能自動引入打包後的js文件，那就再好不過了。這時候，是時候來一發插件了。 6.cnpm install html-webpack-plugin --save-dev
var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require("path") module.exports = { entry:"./index.js", output: { path: path.resolve(__dirname, 'dist'), filename:"bundle.js", }, plugins: [new HtmlWebpackPlugin({ title: "測試" })] };
從新執行命令 webpack ,你會發如今dist下多生成了一個index.html文件，打開發現還有一個script的標籤引用着咱們打包後的文件，nice。 不過問題又來了，html文件很簡陋，就是emmet幫咱們生成的Html5文件，你可能但願還帶有更多的 meta標籤，像這樣的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> </head> <body> <header></header> <nav></nav> <div id="app"></div> <footer></footer> </body>
此時，你能夠本身寫一個模板，只須要告訴html-webpack-plugin插件文件的位置就能夠了。
plugins: [ new htmlWebpackPlugin({ title:"首頁", <!-- 指定模板位置 --> template:'./src/index.html', <!-- 指定打包後的文件名字 --> filename: 'index.html' }) ]
7.cnpm install clean-webpack-plugin --save-dev
plugins:[ new htmlWebpackPlugin({ title:"首頁", template:'./src/index.html', filename: 'index.html' }), <!-- 每次打包前先刪除dist目錄 --> new CleanWebpackPlugin(['dist']) ]
以往咱們寫css都是寫好後手動經過link引入到html,使用webpack後，你將再也不須要手動作這些操做,只須要在js文件中引入，webpack就能幫你搞定，不過須要一些loader和plugin的支持。
###爲了處理css文件咱們須要多配置一個module參數,並使用css-loader來將css文件打包到成「字符串」到js文件中，並使用style-loader將打包後的字符串提取出來並append<style>標籤到head下面 var path=require("path"); var htmlWebpackPlugin=require('html-webpack-plugin'); var CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports={ entry:{ main:'./src/index.js' }, output:{ filename:"bundle.js", path:path.resolve(__dirname,'dist') }, module:{ rules:[ <!-- test檢測到以xxx結尾的東西use對應的loader --> { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins:[ new htmlWebpackPlugin({ title:"首頁", template:'./src/index.html', filename:"index.html" }), new CleanWebpackPlugin(['dist']) ] }
哦，據說你想用sass 預處理 器,那麼只須要在use里加多一個sass-loader,並安裝依賴
cnpm install --save-dev sass-loader node-sass rules:[ { test: /\.scss$/, use: [ 'style-loader', 'css-loader',"sass-loader" ] } ]
什麼，想要自動補全瀏覽器後綴autoprefixer？沒問題
cnpm install --save-dev postcss-loader rules:[ { test: /\.s?css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')({ browsers: ['last 10 versions'] }) ] } }, { loader: "sass-loader" } ] } ]
教練，我還想要自動刷新
安裝webpack-dev-server到開發依賴 cnpm install --save-dev webpack-dev-server
<!-- 在package.json中加入： --> "scripts": { "dev": "webpack-dev-server" }
啓動服務後，若是你 還想讓他本身 打開Localhost，還想 使用模塊熱重載 ，能夠加多一個配置
devServer:{ open:true, hot: true,// 告訴 dev-server咱們想用HMR模式 }
使用「extract-text-webpack-plugin」插件來分離css代碼。
cnpm install --save-dev extract-text-webpack-plugin
var path=require("path"); var webpack=require('webpack'); var htmlWebpackPlugin=require('html-webpack-plugin'); var CleanWebpackPlugin = require('clean-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var extractSass = new ExtractTextPlugin({ filename: "[name].[contenthash].css", disable: process.env.NODE_ENV === "development" }); //經過設置環境變量來告訴webpack咱們在development模式下不須要提取css到單獨在文件，只有當不是development下（也便是production）才須要提取文件。 module.exports={ entry:{ main:'./src/index.js' }, output:{ filename:"bundle.js", path:path.resolve(__dirname,'dist') }, devServer:{ open:true, hot: true, <!-- 告訴 dev-server咱們想用HMR模式 --> }, module:{ rules:[ { test: /\.s?css$/, use: extractSass.extract({ use: [ { loader: "css-loader" }, { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } }, { loader: "sass-loader" }], fallback: "style-loader" }) } ] }, plugins:[ <!-- 使用此插件來支持熱重載 --> new webpack.HotModuleReplacementPlugin(), new htmlWebpackPlugin({ title:"首頁", template:'./src/index.html', filename:"index.html" })