1, webpack brief
(1) webpack is used to implement a modular front-end development tools, can help us to automatically package compiled into code that the browser can be identified; commonjs specification and supports the import norms es6; along with a variety of common language compiler (need to install plug-ins and loader) and other functions.
(2) When using webpack need to use the configuration file name as follows: webpack.config.js
(3) mounted npm i [email protected] -g, a local web server webpack-dev-server version is to be installed: 2.9.7, configure devServer webpack.config.js file attributes, and then run the command webpack-dev-server --inline start to pay attention webpack and webpack-dev-server installation requires global
(4) webpack configuration: inlet, outlet, rules, plug-in
(5) When using the html-webpack-plugin Since this module depends on webpack, so also you need to install a local project webpack, when the same version 3.11.0
(6) command --inline role webpack-dev-server development effect only in local preview, compile the function itself does not contain, if need be developed on the lines of code that need to be performed before the code is compiled to webpack dist directory which
(7) to extract the style code into a separate file
First step in installing the extractor extract-text-webpack-plugin Step configuration loader loader: Ext.extract ( "xxx-loader") Step configuration output file name plugins: [new Ext ( "xxx.css")]
(8) __ filename variable: node.js in any module within the file, you can use __filename variables to get the current module file name with the full absolute path.
__dirname: a complete directory name of the directory of the current file
2, profile properties
const path = require ( "path"); // node path logic processing module
const htmlWebpackPlugin = require ( "html-webpack-plugin"); // the means for automatically copied to the html file dist them, manipulate HTML
const openBrowserWebpackPlugin = require ( "open-browser-webpack-plugin"); // open the browser
const extractTextWebpackPlugin = require ( "extract-text-webpack-plugin") // extractor installation, pulled out independently style style
module.exports = {
entry: [ "./src/main.js"], // declare the project entry file entry: __dirname + "/src/main.js",
output: {// compiler configuration file
path:path.resolve(__dirname,'dist'),
filename: "js / [name] [hash: 8]. .js", // generate decrypted hash rule parsing random strings of length 8 to prevent browser caching
publicPath: "", // on the common path lines need to be configured
},
// output: {// compiler configuration file
// path: __dirname + "/ dist", // configuration file directory
// filename: "index.js" // profile name
},
devtool: "source-map", // open resource map mode allows the browser to facilitate debugging console can accurately point to which file before compiling error
resolve:{
alias: {// Alias
'View': 'view / dist / vue.js'
}
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:['babel-loader']
},
{
test:/\.(png|gif|svg|jpg|woff|woff2|eot|ttf)\??.*$/,
use:["url-loader?limit=8192&name=font/[hash:8].[name].[ext]"] // 8M ext扩展名
},
{
test:/\.(css|scss)$/,
use:extractTextWebpackPlugin.extract({
fallback: "style-loader", // into a node style codes
use: [ "css-loader", // css module into commonJs
{
loader: "postcss-loader", // module
options:{
plugins:function(){
return [
require ( "cssgrace"), // css landscaping
require ( "autoprefixer") () // auto-complete compatibility
]
}
}
},
"Sass-loader" // css code is compiled scss
],
})
},
{
test:/\.(css|less)$/,
use:extractTextWebpackPlugin.extract({
fallback: "style-loader", // into a node style codes
use: [ "css-loader", // css module into commonJs
{
loader: "postcss-loader", // module
options:{
plugins:function(){
return [
require ( "cssgrace"), // css landscaping
// require('postcss-px2rem-exclude')(
// {
// Remuna: 100,
// exclude: / element-ui / i, // do not need to be excluded mint-ui conversion rem
// }
//), // px turn rem
require ( "autoprefixer") () // auto-complete compatibility
]
}
}
},
"Less-loader" // css code is compiled scss
],
})
},
{
test: / \ for $ /,.
loader:'vue-loader',
options:{
loaders:[
{'css':'style-loader!css-loader'},
{'scss':'style-loader!css-loader!sass-loader'},
{'less':'style-loader!css-loader!less-loader'},
]
}
}
]
},
devServer: {
contentBase: path.join (__ dirname, "dist"), // contentBase: __dirname + "/ dist /", // specify the local web service root path
compress:true,
hot:true,
inline: true, // turn on auto-refresh
host:"0.0.0.0",
port: 7000, // set the port number
// open:true,
publicPath:"",
proxy: {// Agent
},
// historyApiFallback: true // processing history routing mode
},
plugins:[
new htmlWebpackPlugin({
template: "./ src / index.html", // statement compiled HTML file
inject: true, // automatically injected css / js link script
}),
new openBrowserWebpackPlugin({url:"http://localhost:7000"}),
new extractTextWebpackPlugin({
filename:'css/app.[hash:8].css',
allChunks: true, // extracting all data
disable: false // true can not be pulled out of style
})
]
}
3, react webpack configuration file
let webpack= require("webpack")
let Hwp = require("html-webpack-plugin")
let Ext = require("extract-text-webpack-plugin")
module.exports = {
entry : __dirname + "/src/main.js",
output : {
path : __dirname + "/dist/",
filename : "app.js",
publicPath : "/"
},
devtool : "source-map",
devServer: {
contentBase : __dirname + "/dist/",
port : 3000,
inline : true,
publicPath : "/",
historyApiFallback : true,
disableHostCheck : true,
proxy : {
"/zhuiszhu" : {
target : "http://39.105.136.190:3000"
}
}
},
module : {
rules : [
{test : /\.js$/ , exclude : /node_modules/ ,loader : "babel-loader"},
{test : /\.less$/,loader :Ext.extract("css-loader!less-loader")},
{test : /\.css$/,loader :Ext.extract("css-loader")},
]
},
plugins : [
new webpack.ProvidePlugin({
React : "react"
}),
new Hwp({
template : "index.html",
filename : "index.html",
inject : true
}),
new Ext("app.css")
]
}
4, vue configuration file webpack
let Hwp = require("html-webpack-plugin")
let Ext = require("extract-text-webpack-plugin")
module.exports={
entry:__dirname+"/src/main.js",
output:{
path:__dirname+"/dist/",
filename:"app.js"
},
devtool:"source-map",
devServer: {
contentBase:__dirname+"/dist/",
port:3000,
inline:true,
proxy:{
"/zhuiszhu":{
target:"http://39.105.136.190:3000"
}
}
},
resolve:{
alias:{
"vue":"vue/dist/vue.js"
}
},
module:{
rules:[
{test:/\.css$/,loader:Ext.extract("css-loader")},
{test:/\.less$/,loader:Ext.extract("css-loader!less-loader")},
{test:/\.html$/,loader:"string-loader"},
{test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"},
]
},
plugins:[
new Hwp({
template:"src/index.html",
filename:"index.html",
inject:true
}),
new Ext("app.css")
]
}