webpack 3.xファイル構成
28382 ワード
webpack 3.x構成
Webpack 3.xメイン構成
アウトライン:
1.
2、
3、
現在、3つのファイルでいいです.以下、具体的に紹介します.
一、基礎配置
1、まず
ローカルで
2、
重点的に紹介します:
例えば、普段運行している:
二、インストール使用命令:(2種類のインストール方法、いずれでもよい)
1、簡単な方法:
上の
利点:手間が省けて便利で、命令が一部到着した.欠点:
2、
例:
PS:
1、
npm install -g cnpm –registry=https://registry.npm.taobao.org
2、
三、webpack.config.jsファイルの作成
PS:紹介:
1、途中でどのモジュールに問題が発生したり、見つからなかったりしたら、
2、モジュールの機能紹介:
四、最後のステップ:
五、完成
インストールに成功すると、==webpack.config.js==のエントリファイルを構成できます!
gitHubアドレス:ここにリンクの内容を書きます
Webpack 3.xメイン構成
webpack.config.jsファイル、各モジュールの詳細には一定のコメントがありますが、間違っているところがあれば、ご指導ください.アウトライン:
1.
package.jsonファイルの作成2、
.babelrcファイルを作成する3、
webpack.configファイルの作成現在、3つのファイルでいいです.以下、具体的に紹介します.
一、基礎配置
1、まず
webpackの基礎配置をグローバルに設置し、npm i webpack -g ローカルで
package.jsonファイルがない場合は、初期化操作を実行できます.npm init 2、
package.jsonファイルを作成する{
"name": "demo",
"version": "1.0.3",
"description": "EOI",
"main": "gulpfile.js",
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"vue": "^2.4.4",
"vue-hot-reload-api": "^2.1.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.5",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.4.4",
"vue-touch": "^1.1.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.7",
"enhanced-resolve": "^3.4.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"gulp": "^3.9.1",
"gulp-imagemin": "^3.3.0",
"gulp-load-plugins": "^1.5.0",
"gulp-sftp": "^0.1.5",
"html-webpack-plugin": "^2.30.1",
"ip": "^1.1.5",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"path": "^0.12.7",
"react": "^16.0.0",
"style-loader": "^0.18.2",
"text-loader": "^0.0.1",
"url-loader": "^0.5.9",
"vue": "^2.4.4",
"vue-loader": "^13.0.5",
"vue-router": "^2.7.0",
"vuex": "^2.4.1",
"watchpack": "^1.4.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"xml-loader": "^1.2.1"
},
"scripts": {
"build": "set NODE_ENV=prod&&gulp imgMin --progress --colors",
"testBuild": "gulp TestBuild --progress --colors",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
"devTest": "gulp devTest",
"devDist": "set NODE_ENV=prod&&gulp devTest218 --progress --colors",
"devDistMainline3": "gulp devDistMainline3"
},
"author": "",
"license": "ISC",
"repository": {
"type": "git",
"url": "bai"
}
}
webpack、vue、およびes6のトランスコードインストールのバージョン情報を説明します.重点的に紹介します:
package.jsonファイルの中のscripts、この中は自分で配置することができて、nodeコマンドを起動することを表します:例えば、普段運行している:
npm run build、npm run dev、npm run startなどはここで配置されているが、同時にカスタマイズすることもできる.二、インストール使用命令:(2種類のインストール方法、いずれでもよい)
1、簡単な方法:
上の
package.jsonファイルを作業ディレクトリにコピーし、実行します.npm install package.jsonファイルのすべての依存パッケージファイルを自動的にダウンロードします利点:手間が省けて便利で、命令が一部到着した.欠点:
package.jsonファイルの指定バージョンしかダウンロードできませんが、webpackが3.x++にアップグレードされていれば、あなたが望む効果は得られません(私は常に更新します)、もしそうなら、2のソリューションを使用します.2、
npm i vue webpack --save-devなどでダウンロードできます.例:
npm i --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-runtime clean-webpack-plugin css-loader enhanced-resolve extract-text-webpack-plugin file-loader html-webpack-plugin ip less less-loader path style-loader text-loader url-loader vue vue-loader vue-router vuex watchpack webpack webpack-dev-server xml-loader PS:
1、
npmが使えない場合、タオバオのミラーcnpmを使って操作することができるnpm install -g cnpm –registry=https://registry.npm.taobao.org
2、
linuxシステムまたはmacであれば、前にsudoを加えて管理者がインストールすることができ、一部のプラグイン書き込みシステムには管理者権限が必要です!三、webpack.config.jsファイルの作成
var webpack = require('webpack'),
path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
uglifyJsPlugin = webpack.optimize.UglifyJsPlugin,
ip = require('ip'),
CleanPlugin = require('clean-webpack-plugin');
console.log("====== ip ========= ：" + ip.address())
// Webpack 1.x ， ，webpack2.x
const HashedModuleIdsPlugin = require('./autopkg/HashedModuleIdsPlugin')
module.exports = {
entry: {
"babel-polyfill": "babel-polyfill", // IE9
app: path.resolve(__dirname, ' + "/app.js"),// app.js
vendor: ['vue', 'vue-router', 'vuex'],//
},
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: './', // devServer.proxy.target ， index.html script src
filename: 'assets/js/[name].js',
chunkFilename: "chunk/[name].chunk.js",
},
devServer: {
inline: true, // true， ， 。
open: true, //: url(webpack-dev-server > 2.0)
port: "9000",//
compress: true, // gzip
host: ip.address(),//ip ， localhost,
progress: true, //
historyApiFallback: true, // : API。
contentBase: "./", //
proxy: {
'*': {
target: 'http://127.0.0.1:80', // Ip
secure: false
}
}
},
/* css ，
* ， ， ，css
*/
/*postcss: [
require('autoprefixer') // autoprefixer
],*/
resolve: {
alias: {
//vue
'vue': 'vue/dist/vue.min',
'vue-router': 'vue-router/dist/vue-router.min',
'vuex': 'vuex/dist/vuex.min',
//react
'react': 'react/dist/react.min',
'react-dom': 'react-dom/dist/react-dom.min',
'redux': 'redux/dist/redux.min',
'react-redux': 'react-redux/dist/react-redux.min',
},
//extensions: ['','.js', '.less', '.css', '.vue', '.jsx'],//1.0
extensions: ['.js', '.less', '.css', '.vue', '.jsx'],//2.0
},
externals: {
},
module: {
// js url 2017-05-03
unknownContextRegExp: /$^/,
unknownContextCritical: false,
// require(expr)
exprContextRegExp: /$^/,
exprContextCritical: false,
// require("prefix" + expr + "surfix")
wrappedContextRegExp: /$^/,
wrappedContextCritical: false,
// end
//vue1.0 leader ：loader: 'vue',，vue2.0 ， ： ：loader: 'vue-loader'
loaders: [{
test: /\.vue$/,
loader: 'vue-loader',
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}, {
test: /\.json$/,
loader: "json-loader"
}, {
test: /\.xml$/,
loader: "xml-loader"
}, {
test: /\.(css|less)$/,
loader: "style-loader!css-loader!less-loader"
}, {
test: /\.(png|jpg|jpeg|gif|icon|webp)$/,
loader: 'url-loader?limit=4192&name=assets/img/[name].[hash:5].[ext]'
}, {
test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
loader: "file-loader?&name=assets/fonts/[name].[ext]"
}, {
test: /\.txt$/,
loader: "text-loader"
},{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: ['jsx-loader', 'babel-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: " " + '/index.html'
}),
new HashedModuleIdsPlugin(),
// ， ， ， ， ---begin
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor'],
}),
//----------------------end----------------
new ExtractTextPlugin("assets/css/[name].[contenthash:5].css", {
allChunks: false /* css */
}),
new webpack.NoErrorsPlugin() // ， 。
]
};
if(process.env.NODE_ENV == "prod") {
//
module.exports.plugins.push(new CleanPlugin(["./dist"], {
"root": path.resolve(__dirname, ""),
verbose: true,
dry: false
}));
//
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
}
})
);
} else {
//
module.exports.plugins.push(new webpack.HotModuleReplacementPlugin());
}PS:紹介:
1、途中でどのモジュールに問題が発生したり、見つからなかったりしたら、
npm i --save-devを直接使用してインストールすればいいです.2、モジュールの機能紹介:
webpack.config.jsの==devServer==の情報紹介:--content-base ： 。
--quiet： 。
--no-info： 。
--colors： 。
--no-colors： 。
--compress： gzip 。
--host ： IP。 。0.0.0.0
--port ： 。
--inline： webpack-dev-server 。
--hot： HotModuleReplacementPlugin 。 ： HotModuleReplacementPlugin 。
--hot --inline webpack/hot/dev-server 。
--public： --inline （ VM Docker ）。
--lazy： ， （ --hot）。
--https： HTTPS webpack-dev-server。 。
--cert，--cacert，--key： 。
--open： url（ webpack-dev-server > 2.0）。
--history-api-fallback： API 。
--client-log-level： 。 error，warning，info none四、最後のステップ:
.babelrcファイルを作成する{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"build": {
"optional": ["optimisation", "minification"]
}
}
}五、完成
インストールに成功すると、==webpack.config.js==のエントリファイルを構成できます!
gitHubアドレス:ここにリンクの内容を書きます