webpack学習ノートコンセプト編
7506 ワード
これは私の第二回の学習webpackです.彼に初めて会った時、私は無頓着な顔をしていました.今回の再会の時、少し楽になりました.今はこの学習ノートを書いて、自分の記憶を固めるために使っています.後で忘れが発生する時も、思い出の資料として使います.今回のwebpackのバージョン番号は3.7.1です.
学習リソース:
慕課網教程:http://www.imooc.com/learn/802 webpack公式サイトの中国語版:https://doc.webpack-china.org
紹介:
webpackの公式紹介では、webpackをモジュールパッケージングとして記述し、先端開発プロジェクトの各ファイルをモジュール化してjsファイルにパッケージする機能を持っています.実はwebpackの機能は非常に強力で、上記のコア機能以外に、webpackを合理的に設定することで、以下の機能を実現できます.
webpackはnodeの下のモジュールですので、webpackをインストールするにはnpmが必要です.まず、
スタート&モジュール化包装:
webpackのコンパイルコマンドはコマンドラインに直接入力できますが、プロジェクトではプロファイルを使ってwebpackを実行していますので、ここではwebpackのコマンドに対して過多な叙述はしません.webpackのプロファイルには
現在、私達はこのようなファイルディレクトリを設定しています.
プラグイン&&jsファイル圧縮&HTML処理:
Loaderの機能はファイルの変換であり、例えばES 6をES 5に変換し、sassをcssに変換するなどである.Loaderを使用する場合、このLoader依存のnpmパッケージをダウンロードしてcss-loaderとstyle-loaderを例にしてください.css-loaderとstyle-loaderの機能はcssファイルをjsモジュールに変換し、ページはこのモジュールを参照することによってcssスタイルダウンロードを得ることができます.
もっと多くのLoader-babel-loader、postcs-loader、sass-loader、file-loader、url-loader
以下はbabel-loader、postcss-loader、sass-loader、file-loader、url-loaderの配置方式です.
ここでは次のいくつかのloaderの詳細を見ることができます.https://doc.webpack-china.org/loaders/
postcs-loaderは、cssを事前解析し、互換性補完し、圧縮を行うための新しいpostcs.co.nfig.jsファイルの構成依存性
sass-loaderは、sassファイルを事前解析するために使用できます.
file-loaderはプロジェクト中の写真などの資源を合理的な位置に保存します.
url-loaderはプロジェクト中のピクチャなどの資源をサイズ制限によってBase 64に変換したり、file-loaderを有効にしたりします.
学習リソース:
慕課網教程:http://www.imooc.com/learn/802 webpack公式サイトの中国語版:https://doc.webpack-china.org
紹介:
webpackの公式紹介では、webpackをモジュールパッケージングとして記述し、先端開発プロジェクトの各ファイルをモジュール化してjsファイルにパッケージする機能を持っています.実はwebpackの機能は非常に強力で、上記のコア機能以外に、webpackを合理的に設定することで、以下の機能を実現できます.
- sass/less
- ES6
- VUE
- Base64
- (html,css,js)
-
webpackはnodeの下のモジュールですので、webpackをインストールするにはnpmが必要です.まず、
npm install webpack -gを使用してグローバルインストールを行うと、命令ラインでwebpackコマンド項目を使用してnpm initを使用してファイルディレクトリを初期化し、npm install webpack --save-devを使用してローカルにインストールすることができます.スタート&モジュール化包装:
webpackのコンパイルコマンドはコマンドラインに直接入力できますが、プロジェクトではプロファイルを使ってwebpackを実行していますので、ここではwebpackのコマンドに対して過多な叙述はしません.webpackのプロファイルには
webpack.config.jsという名前が必要です.このように、このファイルディレクトリの下でwebpckコマンドを実行すれば、プロファイルを起動することができます.現在、私達はこのようなファイルディレクトリを設定しています.
- dist
- js
- src
- script
- main.js
- style
- common.css
- index.html
- package.json
- webpack.config.js
webpack.config.jsファイルの内容は以下の通りである.const path = require('path');
module.exports = {
entry: './src/script/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[hash]_bundle.js',
// publicPath: 'http://www.imooc.com/' //
}
}
entryは、入口ファイルを定義するために用いられ、単一の入口ファイル、多入り口ファイル、多ページアプリケーションの3つのアプリケーションシナリオの詳細ビューに分けられます.https://doc.webpack-china.org/concepts/entry-points/outputは出力ファイルの関連設定を行い、pathは出力フォルダの位置を規定し、node.jsの下のpathモジュールに協力して使用する必要があり、filenameは出力ファイルの出力経路と名称を規定しています.この属性では、「name」や「hash」などの変数の詳細表示が使用できます.https://doc.webpack-china.org/concepts/output/プラグイン&&jsファイル圧縮&HTML処理:
plugins属性は、プラグインの関連設定のために使用されるほとんどのwebpackのプラグインとLoaderは、独立したまたはいくつかの相互依存npmパッケージであり、使用前にCLI(コマンド)を使用してインストールする必要があります.ここではhtml-webpack-pluginプラグインを使用して、npm install --save-dev html-webpack-pluginを使用して、プラグインをインストールして、入口参照ファイルを参照して、処理して、htmlファイルを出力します.プラグインで実行できる処理内容は以下の通りです. - js
- html ， webpack
- html
webpack.config.jsにおける関連内容は以下の通りである.公式サイトで提示された例では、new webpack.optimize.UglifyJsPlugin()プラグインを用いて、jsファイルを圧縮処理プラグインの一部の詳細を見ることができる.https://doc.webpack-china.org/plugins/ html-webpack-plugin詳細表示:https://doc.webpack-china.org/plugins/html-webpack-plugin const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/script/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[hash]_bundle.js',
// publicPath: 'http://www.imooc.com/' //
}，
plugins: [
// js
// new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({
template: './index.html', //
filename: 'index.html', //
inject: 'head', // js
title: 'webpack is good', //
// html
minify: {
// removeComments: true,
// collapseWhitespace: true
},
chunk: ['main'],
// excludeChunks: ['b'] // b
})
]
}
Loaderの機能はファイルの変換であり、例えばES 6をES 5に変換し、sassをcssに変換するなどである.Loaderを使用する場合、このLoader依存のnpmパッケージをダウンロードしてcss-loaderとstyle-loaderを例にしてください.css-loaderとstyle-loaderの機能はcssファイルをjsモジュールに変換し、ページはこのモジュールを参照することによってcssスタイルダウンロードを得ることができます.
npm install --save-dev css-loader style-loader構成:const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
include: /src/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
}
}
module.rulesでは複数のLoaderを構成することができ、testは規定されたファイルの拡張子の正規表現であり、excludeは削除されたフォルダを規定し、includeは反対に、useは使用する必要があると表明したloaderである.もっと多くのLoader-babel-loader、postcs-loader、sass-loader、file-loader、url-loader
以下はbabel-loader、postcss-loader、sass-loader、file-loader、url-loaderの配置方式です.
module: {
rules: [
// {
// test: /\.css$/,
// use: [{
// loader: 'style-loader'
// }, {
// loader: 'css-loader'
// }, {
// loader: 'postcss-loader'
// }]
// },
{
test: /\.scss$/,
use: [{
loader: "style-loader" // JS style
}, {
loader: "css-loader" // CSS CommonJS
}, {
loader: 'postcss-loader'
}, {
loader: "sass-loader" // Sass CSS
}]
},
{
test: /\.js$/,
exclude: /node_modules/,
include: /src/,
loader: "babel-loader"
},
// {
// test: /\.(png|jpg|gif)$/,
// use: [
// {
// loader: 'file-loader',
// options: {
// outputPath: 'images/'
// }
// }
// ]
// },
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 300000, // 300kb
// mimetype: 'image/png', //
fallback: 'file-loader',
outputPath: 'images/'
}
}
]
}
]
}
ここでは次のいくつかのloaderの詳細を見ることができます.https://doc.webpack-china.org/loaders/
postcs-loaderは、cssを事前解析し、互換性補完し、圧縮を行うための新しいpostcs.co.nfig.jsファイルの構成依存性
postcss-import(cssファイルの参照をサポートする)、postcss-cssnext(互換性補完を行う)、cssnano(css圧縮を行う)を行うことができます.sass-loaderは、sassファイルを事前解析するために使用できます.
file-loaderはプロジェクト中の写真などの資源を合理的な位置に保存します.
url-loaderはプロジェクト中のピクチャなどの資源をサイズ制限によってBase 64に変換したり、file-loaderを有効にしたりします.